<script src="./vue.js"></script>
<div id="app">
  <div v-for="(mobile,index) in mobiles" :key="index">
    <div>
      <span><input type="text" v-model="mobile.number" /></span>
      <span><input type="text" v-model="mobile.wx" @input="compute" /></span>
      <span><input type="text" v-model="mobile.zfb" @input="compute" /></span>
      <span>{{mobile.total}}</span>
    </div>
  </div>
  <div>
    <div>
      <span>{{total}}</span>
      <button @click="logger">logger</button>
    </div>
  </div>
</div>
<script>
  new Vue({
    el: "#app",
    data: {
      mobiles: [
        { number: "18762750392", wx: "9.44", zfb: "0", total: 9.44 },
        { number: "13193037083", wx: "34.3", zfb: "35.3", total: 69.6 },
        { number: "17764297074", wx: "520.5", zfb: "211.5", total: 732 },
        { number: "14751017521", wx: "155", zfb: "0", total: 155 },
        { number: "19858302953", wx: "20", zfb: "6.6", total: 26.6 },
        { number: "18042059337", wx: "11.43", zfb: "6.1", total: 17.53 },
      ],
    },
    computed: {
      total() {
        return this.mobiles.reduce((pre, item) => {
          return pre + item.total;
        }, 0);
      },
    },
    methods: {
      compute() {
        this.mobiles.forEach((mobile) => {
          mobile.total = Number(mobile.wx) + Number(mobile.zfb);
        });
      },
      logger() {
        console.log(JSON.stringify(this.mobiles));
      },
    },
  });
</script>
